<template>
  <div class="layout-padding">
    <splitpanes horizontal>
      <pane size="50">
        <div class="layout-padding-auto layout-padding-view">
          <!--查询表单-->
          <el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
            <el-form-item :label="$t('qms.detectionTime')">
              <el-date-picker style="width: 300px"
                              v-model="state.queryForm.checkTime"
                              type="daterange"
                              @change="changeCheckTime"
                              range-separator="To"
                              value-format="YYYY-MM-DD HH:mm:ss"
                              :start-placeholder="$t('iot.startTime')"
                              :end-placeholder="$t('iot.endTime')"/>
            </el-form-item>
            <el-form-item :label="$t('qms.specification')">
              <el-input style="width: 150px" v-model="state.queryForm.spec" clearable :placeholder="$t('qms.specification')"/>
            </el-form-item>
            <el-form-item>
              <el-button icon="search" type="primary"  @click="getDataList">{{ $t('btn.search') }}</el-button>
              <el-button icon="refresh"  @click="resetQuery">{{ $t('btn.reset') }}</el-button>
              <el-button icon="plus" el-icon- type="primary" class="ml10" v-auth="'platform_QmsTiCheckH_add'"
                         @click="formDialogRef.openDialog()">
                {{ $t('operation.add') }}
              </el-button>
              <el-button type="danger" icon="delete" v-auth="'platform_QmsTiCheckH_del'"
                         @click="deleteRow(selectObjs)">{{ $t('btn.delete') }}
              </el-button>
              <el-button type="warning" icon="Check" plain v-auth="'platform_QmsTiCheckH_audit'" @click="audit(selectObjs)">
                {{ $t('qms.examine') }}
              </el-button>
              <el-button type="warning" icon="CircleCheck" v-auth="'platform_QmsTiCheckH_approve'" @click="approve(selectObjs)">
                {{ $t('qms.givePermissionTo') }}
              </el-button>
            </el-form-item>
          </el-form>
          <!--查询结果的列表-->
          <el-table :data="state.dataList" highlight-current-row
                    v-loading="state.loading" border style="width: 100%;height: 100%"
                    :cell-style="tableStyle.cellStyle" stripe :header-cell-style="tableStyle.headerCellStyle"
                    @row-click="clickRow"
                    @selection-change="selectionChangeHandle">
            <el-table-column type="selection" width="40" align="center"/>
            <el-table-column width="200" prop="reportNo" :label="$t('qms.reportNumber')"/>
            <el-table-column width="200" prop="spec" :label="$t('qms.specification')" :width="330"/>
            <el-table-column prop="manufactureDate" :label="$t('qms.productionDate')"/>
            <el-table-column prop="deliveryTime" :label="$t('qms.sampleDeliveryTime')"/>
            <el-table-column prop="reportTime" :label="$t('qms.reportTime')"/>
            <el-table-column prop="checkType" :label="$t('qms.detectionClassCode')"/>
            <el-table-column prop="auditUserName" :label="$t('qms.auditor')"/>
            <el-table-column prop="approveUserName" :label="$t('qms.approver')"/>
            <el-table-column width="200" fixed="right" :label="$t('operation.Operation')">
              <template #default="scope">
                <el-button icon="edit" type="primary" v-auth="'platform_QmsTiCheckH_edit'"
                           @click="openEdit(scope.row,null)">
                </el-button>
                <el-button
                    type="danger"
                    icon="delete"
                    @click.prevent="deleteRow([scope.row.id])"
                    v-auth="'platform_QmsTiCheckH_del'"
                >
                </el-button>
                <el-button
                    type="info"
                    icon="printer"
                    plain
                    @click="openPrint(scope.row,null)"
                >
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination"/>
        </div>
      </pane>
      <pane size="50">
        <div class="layout-padding-auto layout-padding-view">
          <detial ref="locationRef"/>
        </div>
      </pane>
    </splitpanes>
    <form-dialog ref="formDialogRef" @refresh="refresh()"/>
    <print-dialog ref="printDialogRef" @refresh="refresh()"/>
  </div>

</template>

<script setup lang="ts">

import {BasicTableProps, useTable} from "/@/hooks/table";
import detial from "./detial.vue";
import {delQmsTiCheckH, getTiPageSet, qmsTiCheckHApprove, qmsTiCheckHAudit} from "/@/api/platform/qms/qmsCheckReport";
import {useMessageBox} from "/@/hooks/message";
import {useI18n} from "vue-i18n";

const FormDialog = defineAsyncComponent(() => import('./form.vue'));
const PrintDialog = defineAsyncComponent(() => import('./print.vue'));

const {t} = useI18n();

const formDialogRef = ref()
const printDialogRef = ref()


// 搜索变量
const queryRef = ref()
const locationRef = ref()

const editId = ref()

const formatDate = (date: Date): string => {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
};

const openEdit = (row: any, index: number) => {
  formDialogRef.value.openDialog(row, index)
  editId.value = row.id
}

const openPrint = (row: any, index: number) => {
  printDialogRef.value.openDialog(row, index)
  editId.value = row.id
}

const refresh = () => {
  getDataList(false)
  locationRef.value.getDataList();
}

// 仓库表格的配置
const state: BasicTableProps = reactive<BasicTableProps>({
  // queryForm: {"checkStartTime": formatDate(new Date()), "checkEndTime": formatDate(new Date())},
  queryForm: {},
  pageList: getTiPageSet
})


const audit = (ids: Array<number>) => {
  if (ids.length == 0) {
    useMessageBox().warning(t('iot.inputDataIsEmpty'))
    return
  }
  useMessageBox().confirm(t('qms.sureAudit')).then(() => {
    qmsTiCheckHAudit(ids).then(() => {
      getDataList(false)
    })
  });
}

const approve = (ids: Array<number>) => {
  if (ids.length == 0) {
    useMessageBox().warning(t('iot.inputDataIsEmpty'))
    return
  }
  useMessageBox().confirm(t('qms.sureApproved')).then(() => {
    qmsTiCheckHApprove(ids).then(() => {
      getDataList(false)
    })
  });
}


//  table hook
const {
  tableStyle,
  getDataList,
  sizeChangeHandle,
  currentChangeHandle
} = useTable(state)

// 多选变量
const selectObjs = ref([]) as any
const multiple = ref(true)

// 多选事件
const selectionChangeHandle = (objs: { id: string }[]) => {
  selectObjs.value = objs.map(({id}) => id);
  multiple.value = !objs.length;
};

//时间点击
const changeCheckTime = (data) => {
  state.queryForm.checkStartTime = data[0]
  state.queryForm.checkEndTime = data[1]
}

//删除
const deleteRow = (ids: Array<number>) => {
  if (ids.length == 0) {
    useMessageBox().warning(t('iot.inputDataIsEmpty'))
    return
  }
  useMessageBox().confirm(t('operation.permanentDeletion')).then(() => {
    // 删除逻辑
    delQmsTiCheckH(ids).then(() => {
      // 刷新表格逻辑
      getDataList(false)
    })
  });
}


// 点击行的时候触发
const clickRow = (row: any) => {
  locationRef.value.query(row)
}

// 清空搜索条件
const resetQuery = () => {
  // 清空搜索条件
  // state.queryForm = {"checkStartTime":formatDate(new Date()),"checkEndTime":formatDate(new Date())}
  state.queryForm = {}
  // 清空多选
  selectObjs.value = []
  getDataList(false)

}
</script>
